<template>

    <div>
        <!--    <div class="background">-->
        <!--      <img :src="imgSrc" width="100%" height="100%">-->
        <!--    </div>-->
        <div>
            <Top></Top>
            <TopNav></TopNav>
            <form @submit.prevent="change(keywords)" class="ser">
                <div class="m-input">
                    <div class="input">
                        <i></i>
                        <input type="text"
                               v-model="keywords"
                               placeholder="搜索歌曲、歌手、专辑"
                               @input="inputing=true"
                        />
                        <div class="close"><i @click="getMethod"></i></div>
                    </div>
                </div>
            </form>
            <component :is="search" :keywords="keywords" @change="change" @play="$emit('play',$event)"></component>
            <div v-show="history.length>0 &&keywords ==''" class="hisboxx">
                <div class="iconfont icon-lajixiang" @click="clearHistory()"></div>
                <div v-for="i in history" :key="i" class="history">
                    <img src="../assets/shijian.svg" alt="">
                    <div class="histext" @click="change(i)">{{i}}</div>

                </div>
            </div>

        </div>

    </div>


</template>
<script>

    import Top from "../components/Top";
    import TopNav from "../components/TopNav";
    import HotSearch from "../components/HotSearch";
    import SearchSuggest from "../components/SearchSuggest";
    import SearchResult from "../components/SearchResult";
    export default {
        name : "Recommend",
        components: {
            Top,
            TopNav,
            HotSearch,
            SearchSuggest,
            SearchResult
        },
        data(){
            return {
                // imgSrc:require('../assets/icon/wyy.jpg'),
                search:'HotSearch',
                keywords:'' ,
                inputing:false,//标记输入框是否在输入
                history:[]
            }
        },
        created(){

        },
        watch:{
            keywords(val){
                if(val==''){
                    this.search="HotSearch"
                }else if(this.inputing){
                    this.search='SearchSuggest'
                }
            }

        },
        methods:{
            //   点击搜索结果
            change(val){

                if(this.history == undefined || this.history.length<=0){
                    this.history.unshift(val)
                    window.localStorage.setItem('name',JSON.stringify(this.history));
                }

                if(this.history !== undefined && this.history.length>0){
                    let ind = this.history.findIndex(item=>{
                        return item === val
                    })
                    if(ind == -1){
                        this.history.unshift(val);
                        window.localStorage.setItem('name',JSON.stringify(this.history))
                    }
                }


                this.keywords=val
                this.search="SearchResult"
                this.inputing=false//不触发搜索建议提示组件
            },
            getMethod(){
                if(this.keywords) { this.keywords = ''}
            },
            clearHistory () {
                localStorage.removeItem('localHistory') // 清空搜索历史
                this.history= []
            }

        }

    }
</script>
<style lang="less" scoped>
    .ser{
        border-bottom: 1px solid #f1f2f3;
        margin-top: 15px;
    }
    .m-input {
        border-bottom: 1px solid #f1f2f3;
        padding-bottom: 10px;
        width: 400px;
        height: 35px;
        border-bottom-width: 0px;

        .input{
            position: relative;
            width: 100%;
            height: 30px;
            padding: 0 30px;
            box-sizing: border-box;
            background: #ebecec;
            border-radius: 30px;
            text-shadow: none;
            input{
                padding: 0;
                width: 100%;
                border: none;
                height: 30px;
                background: #ebecec;
                outline: none;
            }
            i{
                position: absolute;
                left: 0;
                top: 9px;
                margin: 0 8px;
                vertical-align: middle;
                width: 13px;
                height: 13px;
                background-image:url();
            }
            .close{
                position: absolute;
                right: 0;
                top: 0;
                width: 30px;
                height: 30px;
                line-height: 28px;
                text-align: center;
                i{
                    width: 14px;
                    height: 14px;
                    background-image:url()
                }
            }
        }

    }

    .hisboxx{
        position: relative;
        .iconfont{
            position: absolute;
            right: 12px;
            top: -27px;
        }
        .history{
            //display: flex;
            //margin-top: 20px;
            //margin-left: 10px;
            //margin-right: 10px;

            display: flex;
            margin-left: 10px;
            margin-right: 10px;
            margin-top: 0px;
            height: 25px;


            img{
                width: 20px;
                height: 20px;
                margin-right: 10px;
                margin-top: 2px;
            }

            .histext{
                width: 100%;
                border-bottom: 1px solid #f1f2f3;
                padding-bottom: 10px;
            }
        }
    }




</style>